import React, { useState } from "react";
// import { Column, Bar, Line} from '@ant-design/charts';
import { WordCloud } from '@ant-design/plots';
import {Button, PageHeader, Space} from "antd";
import cityThroughModel from "../models/cityThroughModel";
import '../App.css';

function Flow_ciyun(props) {
    const [data, setData] = useState([]);
    React.useEffect(async () => {
        //分页查询时间段内各城市航班吞吐量
        let getCThroughputList = async () => {
            var arrayModels = [];
            const response = await fetch(
                'http://flightapi.xiexianbo.xin/airPort/getCThroughputList?pageSize=1000',
                {
                    method:'GET'
                }
            )
            const data  = await response.json();
            const data1 = await data.data.data;
            data1.forEach((value)=>{
                let model = new cityThroughModel(value.aptCcity,value.aptName,value.enterNum,value.exitNum,value.total);
                arrayModels.push(model);
            });
            arrayModels.forEach((value)=>{
                console.log(value);
            });
            setData(arrayModels);
        }
        getCThroughputList();
    }, []);

    const config1= {
        data: data,
        weight:500,
        height:800,
        wordField: 'aptName',
        weightField: 'total',
        // color: '#122c6a',
        colorField: 'aptName',
        // imageMask: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.51miz.com%2FElement%2F00%2F24%2F22%2F25%2F81e87367_E242225_4cd47c48.png%21%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue%2Fformat%2Fpng%2Ffh%2F630&refer=http%3A%2F%2Fimg.51miz.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645168567&t=1b4e206975a578684358d6291e4163d8',
        wordStyle: {
            fontFamily: 'Verdana',
            fontSize: [10, 80],
        },
        interactions: [// 设置交互类型
            {
                type: 'element-active',
            },
        ],
        state: {
            active: {
                style: {
                    lineWidth: 3,
                },
            },
        },
    };
    return (
        <>
            <PageHeader
                className="site-page-header"
                onBack={() => {props.history.goBack()}}
                title="总人流量词云"
            />,
            <WordCloud {...config1} ></WordCloud>
            <div className="div2"></div>

        </>
    );
}
export default Flow_ciyun;
